<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="400" height="400">
<!--
This test attempts to test how fast batches of individually transformed 'rect'
elements with a radialGradient fill can be created, be added to the document and
repainted. The time required for each new batch is expected to increase since
the previous batches are not removed from the document.
-->
 <script type="text/javascript">
  var start = new Date();
 </script>
 <text x="10" y="15" font-weight="900" font-size="5">SVG Performance test.</text>
 <text x="10" y="95" font-weight="900" font-size="5">Test not started.</text>
 <rect x="0" y="0" height="100" width="100" stroke="black" fill="none"/>
 <radialGradient id="gradient">
  <stop offset="0%" stop-color="#00F" />
  <stop offset="10%" stop-color="#F60" />
  <stop offset="90%" stop-color="#FF6" />
  <stop offset="100%" stop-color="#00F" />
 </radialGradient>
 <script type="text/javascript"><![CDATA[
  var svg = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
  var t = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'text')[1];

  var Xs = new Array(9, 65, 92, 30, 92, 40, 65, 47, 79, 10, 77, 45,
    27, 13, 43, 52, 55, 46, 1, 24, 42, 11, 15, 18, 42, 49, 50, 30, 69,
    95, 36, 49, 46, 85, 54, 26, 15, 56, 18, 92, 40, 41, 66, 85, 7, 47,
    66, 13, 72, 29, 48, 57, 61, 46, 70, 3, 62, 34, 74, 13, 32, 20, 8,
    2, 60, 97, 58, 1, 0, 89, 85, 48, 52, 98, 12, 26, 5, 5, 48, 19, 22,
    34, 83, 13, 65, 77, 23, 40, 56, 65, 13, 54, 81, 10, 53, 25, 93,
    61, 14, 7);

  var Ys = new Array(42, 80, 93, 30, 54, 33, 76, 56, 2, 79, 37, 80,
    80, 19, 99, 31, 89, 22, 23, 42, 27, 81, 26, 19, 80, 6, 62, 67, 73,
    18, 69, 10, 42, 88, 100, 99, 47, 88, 26, 46, 49, 60, 7, 10, 48, 29,
    25, 26, 33, 73, 84, 24, 42, 74, 5, 49, 69, 81, 19.5, 67, 10, 53, 79,
    56, 32, 98, 78, 7, 3, 68, 12, 80, 42, 24, 82, 69, 9, 43, 47, 19,
    69, 45, 41, 64, 1, 39, 25, 84, 35, 77, 26, 43, 32, 75, 89, 66, 48,
    80, 1, 70);

  var Ss = new Array(5, 3, 1, 3, 1, 8, 8, 7, 8, 5, 1, 4, 4, 2, 1, 2,
    2, 6, 4, 3, 1, 5, 1, 2, 6, 1, 5, 7, 3, 6, 6, 4, 7, 2, 5, 3, 5, 3,
    5, 2, 8, 1, 2, 1, 6, 4, 3, 2, 4, 8, 3, 5, 8, 8, 2, 2, 2, 8, 5, 6,
    4, 8, 5, 3, 6, 2, 3, 2, 3, 6, 3, 5, 8, 7, 2, 4, 8, 8, 6, 4, 6, 1,
    8, 6, 7, 4, 7, 8, 3, 7, 7, 8, 4, 2, 2, 8, 2, 8, 7, 3);

  var Rs = new Array(157, 142, 37, 13, 349, 83, 158, 214, 34, 353,
    196, 29, 296, 225, 124, 355, 68, 305, 315, 190, 146, 274, 167,
    132, 298, 272, 266, 265, 28, 213, 99, 260, 323, 233, 111, 270,
    165, 177, 58, 350, 322, 137, 163, 80, 206, 138, 20, 355, 32, 310,
    309, 260, 153, 309, 151, 189, 52, 170, 326, 157, 65, 41, 28, 92,
    96, 196, 250, 313, 125, 226, 63, 245, 158, 196, 7, 169, 96, 224,
    222, 273, 37, 26, 331, 302, 57, 55, 171, 347, 319, 54, 83, 189,
    281, 79, 75, 138, 223, 138, 238, 69);

  var maxPerBlock = Xs.length / 50;
  var maxBlocks = Xs.length / maxPerBlock;
  var count = 0;
  var rAF = window.requestAnimationFrame || window.mozRequestAnimationFrame;

  function runTest() {
    for (var subcount = 0; subcount < maxPerBlock; subcount += 1) {
      var index = count * maxPerBlock + subcount;
      var newI = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      newI.setAttribute('x', Xs[index] - (99 / Ss[index]) / 2);
      newI.setAttribute('y', Ys[index] - (195 / Ss[index]) / 2);
      newI.setAttribute('height', 195 / Ss[index]);
      newI.setAttribute('width', 99 / Ss[index]);
      newI.setAttribute('fill', 'url(#gradient)');
      newI.setAttribute('transform', 'translate(50, 50) rotate(' + Rs[index] + ') translate(-50, -50)');
      newI.appendChild(document.createTextNode(index));
      svg.insertBefore(newI, t);
    }
    ++count;
    if (count < maxBlocks) {
      rAF(runTest);
      t.firstChild.data = 'Test in progress... ' + count + ' of ' + maxBlocks;
    } else {
      var end = new Date();
      var elapsed = (end - start) / 1000;
      t.firstChild.data = 'Test completed in ' + elapsed.toFixed(2) + 's.';
      if (window.tpRecordTime) window.tpRecordTime(end - start, start);
      if (parent.reportResults) parent.reportResults(end - start, start);
    }
  }
  addEventListener("load", function(){ rAF(runTest); });
 ]]></script>
</svg>
